<template>
  <div id="createArticles">
    <el-dialog title="创建文章分类" :visible.sync="dialogFormVisible">
      <el-form :model="form" size="small">
        <el-form-item
          label="分类名称"
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ]"
          style="font-weight: 600"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="分类图标(180*180)"
          :label-width="formLabelWidth"
          style="font-weight: 600"
        >
          <div class="upLoad">
            <i class="el-icon-camera camera"></i>
          </div>
        </el-form-item>
        <el-form-item
          label="排序"
          :label-width="formLabelWidth"
          style="font-weight: 600"
        >
          <el-input-number
            v-model="form.num"
            @change="handleChange"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number
        ></el-form-item>
        <el-form-item
          label="状态"
          :label-width="formLabelWidth"
          style="font-weight: 600"
        >
          <el-switch v-model="form.value"> </el-switch>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth">
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "createArticles",
  data() {
    return {
      form: {
        name: "",
        num: 1,
        value: true,
      },
      formLabelWidth: "150px",
      dialogFormVisible: false,
    };
  },
  mounted() {
    this.$mitt.on("setModel1", (val) => {
      this.dialogFormVisible = val;
    });
  },
  methods: {
    //排序
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.upLoad {
  width: 58px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  cursor: pointer;
}
.camera {
  font-size: 30px;
}
</style>